<template>
	<view class="u-demo" style="margin-top: 30upx;">
		<view class="u-demo-wrap">
			<view class="u-demo-area">
				<u-steps :direction="direction" :current="current" :list="steps" :mode="mode" :icon="icon"></u-steps>
			</view>
		</view>
		<view class="wrap" v-show="current===0" style="margin-left: 30upx;">
			<u-form :model="model" :rules="rules" ref="uForm" :errorType="errorType">
				<u-form-item :rightIconStyle="{color: '#888', fontSize: '32rpx'}" :label-position="labelPosition" label="学号"
				 label-width="150">
					<u-input :border="border" placeholder="请输入学号" v-model="model.id" type="number"></u-input>
				</u-form-item>
				<u-form-item :rightIconStyle="{color: '#888', fontSize: '32rpx'}" :label-position="labelPosition" label="姓名"
				 label-width="150">
					<u-input :border="border" placeholder="请输入姓名" v-model="model.name" type="text"></u-input>
				</u-form-item>
				<u-form-item :rightIconStyle="{color: '#888', fontSize: '32rpx'}" :label-position="labelPosition" label="所在分院"
				 label-width="150">
					<picker @change="bindPickerChange" :range="array">
						<label class="">{{array[index]}}</label>
					</picker>
				</u-form-item>
				<u-form-item :rightIconStyle="{color: '#888', fontSize: '32rpx'}" :label-position="labelPosition" label="所在班级"
				 label-width="150">
					<u-input :border="border" placeholder="请输入所在班级" v-model="model.class" type="text"></u-input>
				</u-form-item>
				<u-form-item :rightIconStyle="{color: '#888', fontSize: '32rpx'}" :label-position="labelPosition" label="长号"
				 label-width="150">
					<u-input :border="border" placeholder="请输入长号" v-model="model.long" type="number"></u-input>
				</u-form-item>
				<u-form-item :rightIconStyle="{color: '#888', fontSize: '32rpx'}" :label-position="labelPosition" label="短号"
				 label-width="150">
					<u-input :border="border" placeholder="请输入短号" v-model="model.short" type="number"></u-input>
				</u-form-item>
			</u-form>
			<view class="btn">
				<u-button @click="submit2">下一步</u-button>
			</view>

		</view>

		<view class="wrap" v-show="current===1" style="margin-left: 30upx;">
			<u-form :model="model" :rules="rules" ref="uForm" :errorType="errorType" style="margin-left: 20upx;">
				<u-form-item :rightIconStyle="{color: '#888', fontSize: '32rpx'}" :label-position="labelPosition" label="报警类别"
				 label-width="150">
					<u-input :border="border" placeholder="请输入报警类别" v-model="model.type" type="text" disabled="disabled"></u-input>
				</u-form-item>
				<u-form-item :rightIconStyle="{color: '#888', fontSize: '32rpx'}" label-position="top" label="案件详情"
				 label-width="150">
					<textarea :border="border" placeholder="请输入案件详情" v-model="model.conent" type="text"></textarea>
				</u-form-item>
			</u-form>

			<view style="height: 20upx;"></view>
			<text>上传图片（可选）</text>
			<u-upload style="margin: 20upx 0;" :action="action" :file-list="fileList"></u-upload>
			<view style="height: 20upx;"></view>
			<u-row gutter="16" style="margin-top: -10upx;">
				<u-col span="6" text-align="center">
					<u-button @click="submit1" style="width: 40upx;">上一步</u-button>
				</u-col>
				<u-col span="6" text-align="center">
					<u-button throttleTime="1500" @click="submit">提交</u-button>
				</u-col>
			</u-row>
			<u-toast ref="uToast" />
		</view>

		<u-modal v-model="show" :title-style="{color: 'red'}">
			<view class="slot-content" style="padding: 40upx;">
				<rich-text :nodes="content" style="padding: 0upx;"></rich-text>
			</view>
		</u-modal>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				//下拉
				array: [],
				list1: [],
				index: 0,
				show: true, //模态框
				action: undefined,
				content: `<p style="text-indent:2em">如遇诈骗，贵重物品遗失，紧急事件等，请到科院公安部进行面报，以更好的维护你的人身财产安全</p>
				<br>
				<p style="text-indent:2em">科院公安电话：1234567890</p>
				<p style="text-indent:2em">科院公安地址：师生活动中心一楼</p>
				`,
				fileList: [],
				type: 0,
				steps: [{
					name: '填写个人信息'
				}, {
					name: '填写报警信息'
				}, ],
				current: 0,
				icon: 'checkmark',
				mode: 'number',
				direction: 'row',
				model: {},

				rules: {
					oldphone: [{
							required: true,
							message: '请输入手机号',
							trigger: ['change', 'blur'],
						},
						{
							validator: (rule, value, callback) => {
								// 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
								return this.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							// 触发器可以同时用blur和change，二者之间用英文逗号隔开
							trigger: ['change', 'blur'],
						}
					],
					newphone: [{
							required: true,
							message: '请输入手机号',
							trigger: ['change', 'blur'],
						},
						{
							validator: (rule, value, callback) => {
								// 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
								return this.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							// 触发器可以同时用blur和change，二者之间用英文逗号隔开
							trigger: ['change', 'blur'],
						}
					],
					code: [{
							required: true,
							message: '请输入验证码',
							trigger: ['change', 'blur'],
						},
						{
							type: 'number',
							message: '验证码只能为数字',
							trigger: ['change', 'blur'],
						}
					],

				},
				border: false,
				check: false,
				selectStatus: 'close',
				actionSheetShow: false,
				pickerShow: false,
				selectShow: false,
				radioCheckWidth: 'auto',
				radioCheckWrap: false,
				labelPosition: 'left',
				codeTips: '',
				errorType: ['message'],
			}
		},
		onLoad() {

		},

		onLoad: function(option) {
			this.type = option.id
			switch (option.id) {
				case "0":
					this.model.type = '随手拍';
					break;
				case "1":
					this.model.type = '安全隐患';
					break;
				case "2":
					this.model.type = '诈骗报警';
					break;
				case "3":
					this.model.type = '刑事报警';
					break;
				case "4":
					this.model.type = '民事报警';
					break;
			}
			this.$u.api.selectdic({
				dicName: '学院分类',
			}).then(res => {
				this.list1 = res.rows
				for (var i = 0; i < this.list1.length; i++) {
					this.array[i]=this.list1[i].dicLabel;
				}
				/* console.log(this.array) */
			})
		},
		methods: {
			//下拉
			bindPickerChange: function(e) { //改变的事件名
				//console.log('picker发送选择改变，携带值为', e.target.value)   用于输出改变索引值
				this.index = e.target.value //将数组改变索引赋给定义的index变量
				this.jg = this.array[this.index] //将array【改变索引】的值赋给定义的jg变量
				//	console.log("籍贯为：",this.jg)		//输出获取的籍贯值，例如：中国
			},
			modeChange(index) {
				this.mode = index == 0 ? 'number' : 'dot';
			},
			stepChange(index) {
				this.current = [0, 1, 2, 3][index];
			},
			iconChange(index) {
				this.icon = index == 0 ? 'checkmark' : 'map-fill';
			},
			directionChange(index) {
				this.direction = index == 0 ? 'row' : 'column';
			},
			submit2() {
				this.current = 1;
			},
			submit1() {
				this.current = 0;
			},
			submit() {
				this.$u.api.insertCaseFront({
					studentId: this.model.id,
					studentName: this.model.name,
					studentCollege:this.index,
					studentClassname: this.model.class,
					longPhone: this.model.long,
					shortPhone: this.model.short,
					caseType: this.type,
					caseContent: this.model.conent,
					casePic: []
				}).then(res => {
					this.$refs.uToast.show({
						title: '提交成功',
						type: 'success',
						url: '/pages/callpolice/index',
						isTab: true,
						duration: 500
					})

				})
			},
			submit3() {
				console.log("123")
			}
		}
	}
</script>

<style lang="scss" scoped>

</style>
